<!-- 术语缩略语库 -->
<template>
  <div class="editor-business-page" :class="{ expand: topLevel }">
    <div class="search mt20">
      <el-form :model="queryParams" ref="queryForm" :inline="true" size="small" label-suffix=":">
        <el-form-item label="标准名称" prop="standardName">
          <el-input
            v-model="queryParams.standardName"
            placeholder="请输入标准名称"
            clearable
            maxlength="100"
            style="width: 140px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="标准编号" prop="standardNo">
          <el-input
            v-model="queryParams.standardNo"
            placeholder="请输入标准编号"
            clearable
            maxlength="100"
            style="width: 140px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="术语/缩略语中文" prop="nameZh">
          <el-input
            v-model="queryParams.nameZh"
            placeholder="请输入"
            clearable
            maxlength="100"
            style="width: 140px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="术语/缩略语英文" prop="nameEn">
          <el-input
            v-model="queryParams.nameEn"
            placeholder="请输入"
            clearable
            maxlength="100"
            style="width: 140px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="缩略词" prop="nameShort">
          <el-input
            v-model="queryParams.nameShort"
            placeholder="请输入"
            clearable
            maxlength="100"
            style="width: 140px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item class="btn-group">
          <el-button @click="handleQuery" type="primary" size="small">搜索</el-button>
          <el-button plain @click="resetQueryParams" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="controls" v-if="enableTemporary">
        <el-button type="primary" size="small" @click="handleAdd">临时新增</el-button>
      </div>
      <el-tabs v-model="dataType" type="card">
        <el-tab-pane :name="'0'" label="术语">
          <!-- <div class="btn-row">
            <el-button type="primary" size="small" v-if="hasPermission(['term:import'])" @click="handleUpload"
              >增量导入</el-button
            >
          </div> -->
        </el-tab-pane>
        <el-tab-pane :name="'1'" label="缩略语">
          <!-- <div class="btn-row">
            <el-button type="primary" size="small" v-if="hasPermission(['abbr:import'])" @click="handleUpload"
              >导入</el-button
            >
          </div> -->
          <div class="tips">* 缩略语均来源于HD0020民用飞机缩略语手册，当前为最新版本。</div>
        </el-tab-pane>
        <!-- <el-tab-pane :name="'2'" v-if="hasPermission(['term:topublish'])" label="待发布术语">
          <div class="btn-row">
            <el-button v-if="dataType === '2'" type="primary" size="small" @click="handlePublish">一键发布</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="enableTemporary" :name="'3'" label="临时缩略语" /> -->
      </el-tabs>
      <el-table v-loading="loading" :data="dataList">
        <el-table-column label="序号" type="index" width="50" :index="indexMethod" />
        <el-table-column
          v-if="isAbbreviation"
          label="缩略词"
          width="160"
          prop="nameShort"
          key="abb"
          resizable
        />
        <el-table-column
          v-if="isTerm"
          label="中文名称"
          min-width="120"
          prop="nameZh"
          key="zhName"
          resizable
        />
        <el-table-column
          :label="isTerm ? '英文名称' : '英文全称'"
          min-width="200"
          prop="nameEn"
          key="enName"
          resizable
        />
        <!-- <el-table-column
          v-if="isTerm"
          label="定义"
          min-width="300"
          prop="description"
          key="explain"
          resizable
        /> -->
        <el-table-column
          v-if="isAbbreviation"
          label="中文释义"
          min-width="200"
          prop="description"
          key="description"
          resizable
        />
        <el-table-column
          v-if="isTerm"
          label="缩略词"
          width="160"
          prop="nameShort"
          key="nameShortTerm"
          resizable
        />
        <!-- 云效 103778，缩略语不显示以下三列，from 周昆鹏 -->
        <el-table-column
          v-if="!isAbbreviation"
          label="标准名称"
          min-width="200"
          prop="standardName"
          key="name"
          resizable
        />
        <el-table-column
          v-if="!isAbbreviation"
          label="标准编号"
          min-width="200"
          prop="standardNo"
          key="code"
          resizable
        />
        <el-table-column
          v-if="!isAbbreviation"
          label="标准版本"
          min-width="80"
          prop="standardVersion"
          key="version"
          resizable
        />
        <!-- <el-table-column
          v-if="isTerm"
          label="来源"
          min-width="200"
          prop="referSource"
          key="source"
          resizable
        /> -->
        <el-table-column v-if="editable" label="开启/禁用"  min-width="100" key="toggle" resizable>
          <template v-slot="scope">
            <el-switch v-model="scope.row.status" @change="onStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column v-if="isTerm" fixed="right" label="操作"  width="180" key="option">
          <template v-slot="scope">
            <el-button type="text" size="mini" @click="goUpdate(scope.row)"
              >详情</el-button
            >
            <!-- <el-button type="text" size="mini" v-if="hasPermission(['term:edit:info'])" @click="handleUpdate(scope.row)"
              >编辑信息</el-button
            >
            <el-button type="text" size="mini" v-if="hasPermission(['term:edit:doc'])" @click="goUpdate(scope.row)"
              >编辑定义</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="business-pager p20 fr"
        v-show="dataTotal > 0"
        :background="true"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-sizes="[10, 30, 50, 100]"
        :pager-count="7"
        :total="dataTotal"
        @size-change="handleSizeChange"
        @current-change="handlepageNumChange"
      />
    </div>
    <TermUpdateModal :visible.sync="termUpdateModalVisible" :updateData="updateData" @success="handleQuery" />
    <UploadModal
      :visible.sync="uploadModalVisible"
      :uploadUrl="uploadUrl"
      :downloadUrl="downloadUrl"
      @success="refresh"
      @update:visible="refresh"
    />
  </div>
</template>
<script>
import TermUpdateModal from '@/views/editor/__components__/TermUpdateModal.vue'
import UploadModal from '@/views/editor/__components__/UploadModal.vue'
import { publishTerms } from '@/api/business'
import { getSysTermsList, getSysAbbreviationList, switchTermStatus, switchAbbreviationStatus } from '@/api/business'
import { Message } from 'element-ui'

export default {
  components: { UploadModal, TermUpdateModal },
  data() {
    return {
      topLevel: false,
      queryParams: {
        standardName: '',
        standardNo: '',
        nameZh: '',
        nameEn: '',
        nameShort: '',
        pageNum: 1,
        pageSize: 10
      },
      termUpdateModalVisible: false,
      uploadUrl: '',
      downloadUrl: '',
      uploadModalVisible: false,
      loading: false,
      dataType: '0',
      dataList: [],
      dataTotal: 0,
      updateData: {},
      // 是否支持临时术语缩略语
      enableTemporary: false
    }
  },
  computed: {
    isAbbreviation() {
      return this.dataType === '3' || this.dataType === '1' ? true : false
    },
    isTerm() {
      return this.dataType === '2' || this.dataType === '0' ? true : false
    },
    editable() {
      return this.dataType === '3' ? true : false
    }
  },
  watch: {
    dataType(val) {
      this.dataList = []
      this.dataTotal = 0
      this.handleQuery()
    }
  },
  mounted() {
    this.handleQuery()
    let parentPath = window?.parent?.location?.pathname
    if (parentPath == '/stp/abbreviation/index') {
      this.topLevel = true
    } else {
      this.topLevel = false
    }
  },
  methods: {
    indexMethod(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },
    hasPermission(value) {
      return true
      // const value = ['term:topublish']
      const all_permission = '*:*:*'
      const permissions = JSON.parse(sessionStorage.getItem('stpPermission') || '[]')
      if (value && value instanceof Array && value.length > 0) {
        const permissionFlag = value
        const hasPermissions = permissions.some((permission) => {
          return all_permission === permission || permissionFlag.includes(permission)
        })
        if (!hasPermissions) {
          return false
        }
        return true
      }
      return false
    },
    resetQueryParams() {
      this.$refs.queryForm.resetFields()
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    refresh() {
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      const call = ['0', '2'].indexOf(this.dataType) > -1 ? getSysTermsList : getSysAbbreviationList
      call({
        ...this.queryParams,
        type: this.dataType === '2' ? 2 : ['0', '1'].indexOf(this.dataType) > -1 ? 0 : 1
      })
        .then((res) => {
          this.dataList = res.data.list.map((item, index) => ({
            ...item,
            order: index + 1,
            status: Number(item.status) ? true : false
          }))
          this.dataTotal = res.data.count
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleUpload() {
      if (this.dataType === '0') {
        this.uploadUrl = '/prod-api/editor/termsInfo/import'
        this.downloadUrl = '/prod-api/editor/termsInfo/template/download'
      } else if (this.dataType === '1') {
        this.uploadUrl = '/prod-api/editor/abbreviationInfo/import'
        this.downloadUrl = '/prod-api/editor/abbreviationInfo/template/download'
      }
      this.uploadModalVisible = true
    },
    handleSizeChange(val) {
      if (this.queryParams.pageSize * val > this.dataTotal) {
        this.queryParams.pageNum = 1
      }
      this.handleQuery()
    },
    handlepageNumChange() {
      this.handleQuery()
    },
    goUpdate(row) {
      window.open(`/editor/view?id=${row.id}&editContentType=block&entry=termpreview`, '_blank')
    },
    handleUpdate(row) {
      this.updateData = row
      this.termUpdateModalVisible = true
    },
    async handlePublish() {
      try {
        await publishTerms()
        this.refresh()
        Message.success('发布成功')
      } catch (error) {
        Message.error('发布失败')
      }
    },
    // 切换术语/缩略语状态
    onStatusChange(item) {
      const call = this.dataType === '2' ? switchTermStatus : switchAbbreviationStatus
      call({
        id: item.id,
        status: item.status ? '1' : '0'
      })
        .then((res) => {
          Message.success(item.status ? '开启成功' : '禁用成功')
        })
        .finally(() => {
          this.handleQuery()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/editor.scss";
.expand {
  width: calc(100vw - 20px);
  margin: 0 auto;
}
.content {
  padding: 24px;
}
.content .controls {
  margin-bottom: 24px;
}
.tips {
  font-size: 12px;
  color: red;
}
.btn-row {
  margin-bottom: 10px;
}
</style>
